/* 
 * 功能：vxe-grid 单页快速查询
 * 参数：对象第1个参数data表示列表数据源；第2个参数querystring表示查询关键字；第3个参数highlight可选，表示是否高亮显示数据行，默认不高量
 */
import XEUtils from "xe-utils";

const b = function(el, binding, vnode, oldVnode){
    let arg = binding.value;    //指令参数
    let xTable = vnode.child;   //VueComponent实例
    xTable.loadData(arg.data);
    xTable.reloadData(arg.data);
}

const u = function(el, binding, vnode, oldVnode){
    let arg = binding.value;    //指令参数
    let xTable = vnode.child;   //VueComponent实例
    arg.querystring = XEUtils.toString(arg.querystring)
        .trim()
        .toLowerCase();
    if (arg.querystring) {
        let filterRE = new RegExp(arg.querystring, "gi");
        //获取表格的可视列的field
        let searchProps = [];
        xTable.getColumns().forEach((item, index) => {
            if (item.property) {
                searchProps.push(item.property);
            }
        })
        //树型快搜
        const options = { children: 'children' }
        const rest = XEUtils.searchTree(arg.data, item => searchProps.some(key => XEUtils.toString(item[key]).toLowerCase().indexOf(arg.querystring) > -1), options)
        //高亮匹配条件
        if (arg.highlight) {
            XEUtils.eachTree(rest, item => {
                searchProps.forEach(key => {
                    item[key] = XEUtils.toString(item[key]).replace(filterRE, match => `<span style='color: #000;background-color: #ffff00;'>${match}</span>`)
                })
            }, options)
        }
        // 搜索之后默认展开所有子节点
        // Vue.nextTick(() => {
        //     xTable.setAllTreeExpand(true)
        // })
        // 返回rest中对于每一项都增设 children 属性
        xTable.reloadData(rest);
    }else{
        xTable.reloadData(arg.data);
    }
}

export default {
    bind : b,
    update: u
}